<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style>
		body {
		  background-color:#1d1d1d;
		  color:#f3f2ef;
		}
		h2 {
		  font-family: "Signika Negative", sans-serif;
		  margin: 10px 0 10px 0;
		  font-size:30px;
		}
		p{
		  line-height:22px;
		  margin-bottom:16px;
		}
		#demo {
		  height:100%;
		  position:relative;
		}
		.box {
		  width:50px;
		  height:50px;
		  position:relative;
		  border-radius:6px;
		  margin-top:4px;
		  display:inline-block
		}
		.green{
		  background-color:#6fb936;
		}
		.orange {
		  background-color:#f38630;
		}
		.grey {
		  background-color:#989898;
		}
	</style>
</head>
<body>
	
	<h2>TweenMax.staggerTo()</h2>
	  <div id="demo">
	    <p>每个动画序列的开始时间间隔0.5秒</p>
	    <div class="box green"></div>
	    <div class="box grey"></div>
	    <div class="box orange"></div>
	    <div class="box green"></div>
	    <div class="box grey"></div>
	    <div class="box orange"></div>
	    <div class="box green"></div>
	    <div class="box grey"></div>
	    <div class="box orange"></div>
	  </div>
	
	<script src="TweenMax.min.js"></script>
	<script>
		TweenMax.staggerTo(".box", 1, {rotation:360, y:100}, 0.5);
		// 每个方块旋转360度,，y轴移动100px，每个动画执行间隔0.5s
	</script>
</body>
</html>